<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select name="mySelect" id="mySelect">
    <option value="boxue">boxue</option>
  </select>
  <script>
    /* `new Option()` 是一个用来创建新的 <option> 元素的构造函数，可用于动态地向 <select> 下拉列表添加选项
    1. **text**（必需）：这是一个字符串，表示在下拉列表中为用户显示的文本。
    2. **value**（可选）：这是一个字符串，表示选项的值。在表单提交时，如果此选项被选中，这个值将被发送到服务器。如果不指定，`text` 将被当作值。
    3. **defaultSelected**（可选）：这是一个布尔值（true 或 false），用于指定选项在创建时是否应该被默认选中。如果不指定或指定为 false，则选项在创建时不会被选中。
    4. **selected**（可选）：这也是一个布尔值（true 或 false），用于指定选项在页面加载后是否应该被选中。这个参数的行为会覆盖 defaultSelected 参数。
    */
    var opt = new Option('文本显示', 'optionValue', false, true);
    var selectElement = document.getElementById('mySelect');
    // selectElement.appendChild(opt);

    // 将新建的 option 添加到 select 元素中，第二个参数是要插入的位置（其它选项的引用）；
    // 如果省略或为 null，则 option 将添加到末尾。
    selectElement.add(opt, null);

    for (let i = 0; i < 10; i++) {
      var opt = new Option('文本显示' + i, 'optionValue' + i);
      // selectElement.add(opt, null);
      selectElement.add(opt, selectElement.firstChild); // 添加为第一个子元素
    }

    for (let i = 10; i < 20; i++) {
      var opt = new Option();
      opt.text = "Display Text" + i;
      opt.value = "UniqueValue" + i;
      opt.defaultSelected = true;
      opt.selected = true;
      selectElement.add(opt, null);
    }



  </script>
</body>

</html>